<template>
    <div name="show">
        <ul class="goodList">
            <li v-for="goods in list">
                <img v-bind:src="goods.img">
                <p>{{goods.goodName}}</p>
            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        name: "show",
        data(){
            var obj = this;
            this.$http.get("json/bjb.json").then(function(res){
                obj.list = res.data
            })
            return{
                list:[]
            }
        }
    }
</script>

<style scoped>
 .goodList{
     padding-inline-start: 0px;
 }
.goodList li{
    width: 200px;
    height: 200px;
    list-style: none;
    float: left;
    font-size: 9px;
    color: red;
    margin-bottom: 30px;
}
.goodList img{
    width: 180px;
    height: 180px;
}
</style>
